<script>
import {generateOrderNoGet, publishCenter} from "@/js/pickupApi";
import {message} from "ant-design-vue";
import {ref, onMounted} from "vue";
import jumpHelper from "@/js/pageJumper";

export default {
  setup() {
    const token = ref('');

    onMounted(() => {
      token.value = localStorage.getItem('token');
      initOrderNo(token.value);
    });

    const initOrderNo = (t) => {
      const getResult = generateOrderNoGet(t);
      getResult.then(response => {
        message.success('aaa');
        publishCenterRequestBody.value.orderNo = response.data.data;
      }).catch(e => {
        console.log(e);
      });
    };


    const publishTask = async () => {
      try{
        let res = await publishCenter(token.value, publishCenterRequestBody.value);
        if(res.data.success){
          message.success("发布订单成功！");
          setTimeout(() => {
            jumpHelper.jumpToCustomerPublished();
          }, 2000);
        }

      }catch (err){
        message.error("发布订单失败！" + err);
      }
    };

    const publishCenterRequestBody = ref({
      orderNo: "",
      orderPrice: null,
      buyOnBehalf: "",
      itemPicture: "",
      publishingUserId: null,
      contactPerson: "",
      contactNumber: "",
      purchaseAddress: "",
      addressForService: ""
    });

    return {
      token,
      publishTask,
      publishCenterRequestBody
    };
  }
};

</script>

<template>
  <div class="appearing-container">
      <div class="tmp1">
        <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture"
        >
          <el-button type="primary">上传图片</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
          <h3>(调用2.1上传图片地址-并得到地址)</h3>
      </div>
      <div class="tmp2">
          <h3>订单基本信息</h3>

          <div class="input-container">
              <label>订单编号：</label>
              <a-input class="myInput" v-model:value="publishCenterRequestBody.orderNo" placeholder="please" readonly></a-input>
          </div>
          <div class="input-container">
              <label>订单价格：</label>
              <a-input class="myInput"  v-model:value="publishCenterRequestBody.orderPrice" placeholder="please"></a-input>
          </div>
          <div class="input-container">
              <label>订单物品：</label>
              <a-input class="myInput" v-model:value="publishCenterRequestBody.buyOnBehalf" placeholder="please"></a-input>
          </div>


<!--          <p>(调用1.0 自动生成订单编号)</p>-->
      </div>

      <div class="tmp3">
          <h2>订单详细信息</h2>
          <div class="input-container">
              <label>联系人员：</label>
              <a-input class="myInput" v-model:value="publishCenterRequestBody.contactPerson" placeholder="please"></a-input>
          </div>
          <div class="input-container">
              <label>联系方式：</label>
              <a-input class="myInput" v-model:value="publishCenterRequestBody.contactNumber" placeholder="please"></a-input>
          </div>
          <div class="input-container">
              <label>起始地址：</label>
              <a-input class="myInput" v-model:value="publishCenterRequestBody.purchaseAddress" placeholder="please"></a-input>
          </div>
          <div class="input-container">
              <label>送达地址：</label>
              <a-input class="myInput" v-model:value="publishCenterRequestBody.addressForService" placeholder="please"></a-input>
          </div>

          <a-button class="my-btn" @click="publishTask">发布任务</a-button>
      </div>
  </div>
</template>

<style scoped>
  .tmp1{
      position: absolute;
      left: 5%;
      right: 60%;
      bottom: 60%;
      top: 5%;
      background: lightsteelblue;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .tmp2{
      position: absolute;
      left: 45%;
      right: 5%;
      bottom: 60%;
      top: 5%;
      background: lightsteelblue;
      display: flex;

      flex-direction: column;
      justify-content: center;
  }
  .tmp2 > * {
      margin-left: 20px; /* 调整子元素离左边框的距离，根据需要调整 */
  }

  .tmp3{
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: 5%;
      top: 45%;
      background: lightsteelblue;
      display: flex;
      flex-direction: column;
      //align-items: center;
      justify-content: center;
  }

  .tmp3 > * {
      margin-left: 20px; /* 调整子元素离左边框的距离，根据需要调整 */
  }

  .input-container {
      display: flex;
      align-items: center;
      margin-top: 20px; /* 设置下方间隔，根据需要调整 */
  }



  label {
      margin-right: 10px; /* 设置标签和输入框之间的间距，根据需要调整 */
      color: darkslateblue; /* 设置字体颜色为深灰色，根据需要调整 */
      font-size: large;
      font-family: '宋体', sans-serif; /* 设置字体为宋体，根据需要调整 */
  }

  /* 输入框样式 */
  .myInput {
      width: 300px; /* 设置宽度，根据需要调整 */
      height: 30px; /* 设置高度，根据需要调整 */
      font-size: 16px; /* 设置字体大小，根据需要调整 */
      color: #333333;
      font-family: '宋体', sans-serif; /* 设置字体为宋体，根据需要调整 */
      border: 2px solid #ccc; /* 设置边框为灰色实线，根据需要调整 */
      border-radius: 8px; /* 设置边框圆润度，根据需要调整 */
      padding: 8px; /* 设置内边距，根据需要调整 */
      /* 其他样式属性根据需要添加 */
      /* 控制只展示 value */
      background: transparent; /* 设置背景为透明 */
      border: none; /* 移除边框 */
      outline: none; /* 移除聚焦时的边框 */
  }


  /* 选择图片*/
  .my-btn{
      position: absolute;
      height: 32px;
      width: 80px;
      left: 8px;
      bottom: 9px;
  }

  .my-btn1{
      position: absolute;
      height: 32px;
      width: 80px;
      left: 108px;
      bottom: 9px;
  }
</style>
